<template>
      <div>
        <div v-if="Math.ceil(total / 35) > 9">
        <div class="u-page">
          <a href="javascript:;" class="zbtn" @mousedown="previous_jump"
            :style="page_stype == 1? Turn_type1:''">上一页</a
          >
          <a href="javascript:;" class="zpgi" @mousedown="jump(1,1)" :style="page - 4 == page_stype?page_stype_bg:''">1</a>
          <span v-if="page > 5">...</span>
          <a href="javascript:;" class="zpgi" @mousedown="jump(page - 3,2)" :style="page - 3 == page_stype?page_stype_bg:''">{{
            page - 3
          }}</a>
          <a href="javascript:;" class="zpgi" @mousedown="jump(page - 2,3)" :style="page - 2 == page_stype?page_stype_bg:''">{{
            page - 2
          }}</a>
          <a href="javascript:;" class="zpgi" @mousedown="jump(page - 1,4)" :style="page - 1 == page_stype? page_stype_bg:''">{{
            page - 1
          }}</a>
          <a href="javascript:;" class="zpgi" @mousedown="jump(page,5)" :style="page == page_stype? page_stype_bg:''">{{
            page
          }}</a>
          <a href="javascript:;" class="zpgi" @mousedown="jump(page + 1,6)" :style="page + 1 == page_stype? page_stype_bg:''">{{
            page + 1
          }}</a>
          <a href="javascript:;" class="zpgi" @mousedown="jump(page + 2,7)" :style="page + 2 == page_stype? page_stype_bg:''">{{
            page + 2
          }}</a>
          <a href="javascript:;" class="zpgi" @mousedown="jump(page + 3,8)" :style="page + 3 == page_stype? page_stype_bg:''">{{
            page + 3
          }}</a>

          <span v-if="marvellous_flat1">...</span>
          <a
            href="javascript:;"
            class="zpgi"
            @mousedown="jump(Math.ceil(total / 35),9)"
             :style="Math.ceil(total / 35) == page_stype? page_stype_bg:''">{{Math.ceil(total / 35)}}</a
          >
          <a href="javascript:;" class="znxt" @mousedown="next_jump"
            :style="page_stype == Math.ceil(total / 35)? Turn_type2:'' ">下一页</a
          >
        </div>
      </div>
      <div v-if="Math.ceil(total / 35) <= 9 && Math.ceil(total / 35) > 1">
        <div class="u-page">
          <a href="javascript:;" class="zbtn" @mousedown="jump(Turn_pages - 1)" :style="Turn_pages == 1? Turn_type1:''">上一页</a>
          <a
            href="javascript:;"
            class="zpgi"
            v-for="index in Math.ceil(total / 35)"
            :key="index"
            @mousedown="jump(index)" :style="index == page_stype?page_stype_bg:''">{{ index }}</a
          >
          <a href="javascript:;" class="znxt" @mousedown="jump(Turn_pages - 1)" :style="Turn_pages == Math.ceil(total / 35)? Turn_type2:'' ">下一页</a>
        </div>
      </div>
   </div>
    
</template>

<script>

export default {
   name:'SongSheetPageNumber',
   data(){
     return{
           page:5,
          
           Turn_pages:1,
           Turn_type2:{
        backgroundPosition:'-75pX -620px',
        color:'#cacaca',
        cursor:'default'
      },
      page_stype_bg:{
        backgroundPosition:'0 -650px',
        borderColor:'#A2161B',
        color:'#fff',
        cursor:'default'
      },
      Turn_type1:{
        backgroundPosition:'0 -620px',
        color:'#cacaca',
        cursor:'default',
        
       
      },
    
      marvellous_flat1:true,
      marvellous_flat:true
     }

   },
   props:['page_stype','total'],
   methods:{
          jump(index) {
            
           
           if (this.page_stype != index) {
             this.$bus.$emit('pageNumber',index)

           }
         
    
      
    },
    next_jump(){
      if (this.page_stype != Math.ceil(this.total / 35)) {
      this.$bus.$emit('pageNumber',this.page_stype + 1)
      }
    },
    previous_jump(){
      if (this.page_stype != 1) {
       this.$bus.$emit('pageNumber',this.page_stype - 1);
      }
    }
   },

   mounted(){
       if (this.page_stype > 5 && this.page_stype < Math.ceil(this.total / 35) - 4) {
       
           this.page = this.page_stype;
       }else if (this.page_stype >= Math.ceil(this.total / 35) - 4) {
            this.page = Math.ceil(this.total / 35) - 4;
            this.marvellous_flat1 = false 
       }
   },
   
  watch:{
        page_stype(value){
        
          
            if (value > 5 && value < Math.ceil(this.total / 35) - 4) {
       
           this.page = value;
       }else if (value >= Math.ceil(this.total / 35) - 4) {
            
            this.page = Math.ceil(this.total / 35) - 4;
            this.marvellous_flat1 = false 
       }
        }
  }
   
}
</script>

<style scoped lang='less'>
  .u-page {
  margin: 20px 0;
  text-align: center;
}
.zbtn {
  margin: 0 1px 0 2px;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 2px;
  width: 47px;
  height: 24px;
  padding-left: 22px;
  line-height: 24px;
  background: url(../images/button.png) no-repeat 0 -560px;
  text-align: left;
  &:hover {
    background: url(../images/button.png) no-repeat 0 -590px;
    color: inherit;
  }
}
 a {
   &:hover {
     text-decoration: none;
   }
 }

.zpr {
  color: #cacaca;
  cursor: default;
}

.znxt {
  margin: 0 1px 0 2px;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 2px;
  width: 47px;
  height: 24px;
  padding-right: 22px;
  line-height: 24px;
  background: url(../images/button.png) no-repeat -75px -560px;

  cursor: default;
  text-align: right;
  cursor: pointer;
  &:hover {
    background: url(../images/button.png) no-repeat -75px -590px;
    color: inherit;
  }
}
.zpgi {
  height: 22px;
  padding: 0 8px;
  background-color: #fff;
  line-height: 22px;
  margin: 0 1px 0 2px;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 2px;
  background: url(../images/button.png) no-repeat 0 9999px;
  
  &:hover {
    border: 1px solid #000;
  }
}

</style>